<template>
  <div class="qiaobi-status-wrap-container">
    <div class="qiaobi-box" @click="qiaobiClick">
      <div class="title-wrapper">
        <div class="title">
          {{ name }}
        </div>
        <div class="state">
          <span class="state-icon" :style="getIconBgColor(state)"></span>
          <span class="state-text" :style="getTextColor(state)">{{
            state | stateFilter
          }}</span>
        </div>
      </div>
      <!-- <div class="son-content">
        <div class="item" :class="item.label == '正常'
            ? 'normal'
            : item.label == '严重'
              ? 'breakdown'
              : 'abnormity'
          " v-for="(item, index) in countList" :key="index">
          <span class="value">{{ item.count }}</span>
          <span class="label">{{ item.label }}</span>
        </div>
      </div> -->
      <div class="son-content" style="color: white">
        <div v-for="(value, key, index) in leakList" :key="index" class="leak">
          <h3>{{ value.groupName }}</h3>
          <div class="leak-item">
            <div v-for="(element, idx) in value.values" :key="'遥信量' + idx" :style="getIconBgColor(element.state)">
              <p>{{ element.name }}</p>
              <p>{{ element.state | stateFilter }}</p>
            </div>
            <!-- <div
              :style="getIconBgColor(value.oneState)"
            >
              <p>二级报警</p>
              <p>{{ value.twoState | stateFilter }}</p>
            </div>
            <div
              :style="getIconBgColor(value.oneState)"
            >
              <p>报警错误</p>
              <p>{{ value.alarmErrorState | stateFilter }}</p>
            </div> -->
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
/**
 * 换流阀子模块组件 - 使用
 */
export default {
  name: "ItemWrKangba",
  props: {
    normal: { type: Number }, // 正常
    abnormal: { type: Number }, // 异常
    error: { type: Number }, // 严重
    name: {
      type: String,
      default: "",
    }, // 名称
    state: { type: [Number, String] }, // 0：正常，1：异常，2：严重
    id: { type: String, default: "0" },
    leakList: { type: Array, default: () => [] },
  },
  data() {
    return {
      countList: [
        { label: "正常", count: "", state: 0 },
        { label: "严重", count: "", state: 1 },
        { label: "异常", count: "", state: 2 },
      ],
      leak: {},
    };
  },
  filters: {
    stateFilter(val) {
      switch (val) {
        case 0:
          return "健康";
        case 1:
          return "异常";
        case 2:
          return "严重";
        case 3:
          return "正常";
        default:
          return "";
      }
    },
  },
  mounted() {
    this.countList = [
      { label: "正常", count: this.normal, state: 0 },
      { label: "严重", count: this.error, state: 1 },
      { label: "异常", count: this.abnormal, state: 2 },
    ];
  },
  watch: {
    leakList: {
      handler(data) {
        this.leak = data.reduce((acc, item) => {
          // 提取阀塔编号和报警类型
          const match = item.pointName.match(/(\d)#阀塔漏水(.*?报警.*)/);
          if (match) {
            const [, valveTower, alarmType] = match;

            // 构建或更新阀塔对应的报警数组
            if (!acc[`${valveTower}#阀塔漏水`]) {
              acc[`${valveTower}#阀塔漏水`] = [];
            }
            acc[`${valveTower}#阀塔漏水`].push({
              // pointName: alarmType.replace("报警", ""), // 去掉"报警"字样，根据需要调整
              pointName: alarmType, // 去掉"报警"字样，根据需要调整
              state: item.state,
            });
          }
          return acc;
        }, {});
      },
      deep: true,
      immediate: true,
    },
  },
  methods: {
    transformData(data) { },
    getIconBgColor(state) {
      return {
        "background-color":
          state == "0" || state == "3"
            ? "#1cbe21"
            : state == "1"
              ? "#ffaa00"
              : state == "2"
                ? "#ff3737"
                : "#1cbe21",
      };
    },
    getTextColor(state) {
      return {
        color:
          state == "0" || state == "3"
            ? "#1cbe21"
            : state == "1"
              ? "#ffaa00"
              : state == "2"
                ? "#ff3737"
                : "#1cbe21",
      };
    },
    qiaobiClick() {
      this.$emit("qiaobiClick", this.id);
    },
  },
};
</script>
<style scoped lang="less">
.qiaobi-status-wrap-container {
  position: relative;
  width: 0;
  height: 0;
  padding: 10px;
  box-sizing: border-box;

  .qiaobi-box {
    cursor: pointer;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    border: 1px solid #3099d1;
    background: rgba(48, 153, 209, 0.2);
  }

  .title-wrapper {
    width: 100%;
    height: 32px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    padding: 0 10px;
    background: #075d78;
  }

  .title {
    height: 100%;
    line-height: 32px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-size: 18px;
    color: #fff;
  }

  .state {
    height: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;

    span.state-icon {
      display: inline-block;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      border: 1px solid #3099d1;
      margin-right: 5px;
      background: rgba(48, 153, 209, 0.2);
    }

    span.state-text {
      font-size: 14px;
    }
  }

  .son-content {
    // height: calc((100% - 32px) / 3);
    width: 100%;
    box-sizing: border-box;
    padding: 10px;
    display: flex;
    justify-content: space-between;
    height: calc((100% - 32px));
    // flex-direction: column;
    flex-wrap: wrap;
    padding-top: 0;

    .leak {
      height: 50%;
      width: 48%;


      h3 {
        line-height: 30px;
        color: #28e9f2;
      }

      .leak-item {
        display: flex;
        justify-content: space-between;
        height: calc(100% - 30px);
        align-items: center;

        &>div {
          width: calc(100% - 8px);
          height: 100%;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;

          p {
            line-height: 1.5em;
            font-size: 14px;
          }
        }
      }
    }

    .item {
      width: calc(33.3% - 8px);
      height: 100%;
      // border: 1px solid rgb(80, 229, 239);
      margin: 0 6px;
      font-size: 14px;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      align-items: center;
      color: #fff;

      //box-shadow: 10px 10px 50px rgb(80, 229, 239);
      &.normal {
        //background: linear-gradient(to right, #1cbe21, #7ffd84);
        background: #1cbe21;
        //box-shadow: 10px 10px 50px #1cbe21;
      }

      &.abnormity {
        //background: linear-gradient(to right, #ffaa00, #fff388);
        background: #ffaa00;
        //box-shadow: 10px 10px 50px #ffaa00;
      }

      &.breakdown {
        //background: linear-gradient(to right, #ff3737, #ff6543);
        background: #ff3737;
        //box-shadow: 10px 10px 50px #ff3737;
      }

      .value {
        font-size: 22px;
      }
    }
  }
}
</style>
